<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery-2.0.0.min.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .circlur {
            width: 200px;
            height: 200px;
            background-color: violet;
            margin: auto;
            margin-top: 100px;
            position: relative;
            border-radius: 50%;
        }

        .left,
        .right {
            width: 100px;
            height: 200px;
            position: absolute;
            overflow: hidden;
            border: none;
        }

        .left {
            top: 0px;
            left: 0px;
        }

        .right {
            top: 0px;
            left: 100px;
        }

        .leftcir,
        .rightcir {
            width: 100px;
            height: 200px;
            /* transition: all 1s; */
            overflow: hidden;
        }

        .leftcir {

            background-color: lime;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            transform-origin: right center;
            transform: rotate(180deg);
            /* animation: leftmove 2s linear forwards; */
            /* animation-delay: 2s; */
        }

        .rightcir {
            background-color: lime;
            border-top-right-radius: 100px;
            border-bottom-right-radius: 100px;
            transform-origin: left center;
            transform: rotate(-180deg);
            /* animation: rightmove 2s linear forwards; */
        }

        /* .rightcir:hover {
            transform: rotate(0deg);
        } */

        @keyframes leftmove {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes rightmove {
            to {
                transform: rotate(0deg);
            }
        }


        .shadow {
            width: 170px;
            height: 170px;
            position: absolute;
            top: 50%;
            left: 50%;
            text-align: center;
            font-size: 40px;
            line-height: 170px;
            transform: translate(-50%, -50%);
            background-color: tomato;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="circlur">
        <div class="left">
            <div class="leftcir"></div>
        </div>
        <div class="right">
            <div class="rightcir"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <script>
        let count = 0;
        let total = 2000;
        let timer = setInterval(function () {
            let num = Number((count / total) * 100).toFixed(1);
            let deg = Number((count / 2000) * 360).toFixed(0);
            // console.log(deg);
            // console.log(parseInt((count / 2000) * 360));
            if (num > 100) {
                clearInterval(timer);
            } else {
                count++;
                if (deg > 180) {
                    $(".leftcir").css({
                        "transform": "rotate(" + deg + "deg)",
                    })
                } else {
                    $(".rightcir").css({
                        "transform": "rotate(-" + (180 - deg) + "deg)",
                    })
                    // console.log((180 - deg))
                }
                $(".shadow").text(num + "%")
            }
        }, 10)
    </script>
</body>

</html>